.fifth {
    width: 100%;
    height: 100%;

    .fiveTop {
        width: 100%;
        height: 50%;
        // background-color: aqua;
        background: url(./images//topbj.jpg) center center no-repeat;
        background-size: cover;
        position: relative;
        animation: fivebj1 1.5s;

        @keyframes fivebj1 {
            from {
                transform: translateY(-50px);
            }

            to {
                transform: translateY(0);
            }
        }

        .topmain {
            position: absolute;
            width: 85%;
            height: 34%;
            // background-color: aqua;
            // margin: 0 auto;
            left: 7.5%;
            bottom: 0;

            .topmaintop {
                height: 50%;
                width: 100%;
                display: flex;
                justify-content: space-between;

                .a1 {
                    width: 36%;
                    height: 75%;
                    background: url(./images/font3.png) center center no-repeat;
                    background-size: cover;
                    animation: fivefont1 1.5s 1.5s;
                    opacity: 0;
                    animation-fill-mode: forwards;
                }

                @keyframes fivefont1 {
                    from {
                        opacity: 0;
                        transform: translateY(50px);
                    }

                    to {
                        opacity: 1;
                        transform: translateY(0);
                    }
                }


                .a2 {
                    width: 48%;
                    height: 22%;
                    margin-top: 0.3rem;
                    background: url(./images/font2.png) center center no-repeat;
                    background-size: cover;
                    animation: fivefont2 1.5s 1.5s;
                    opacity: 0;
                    animation-fill-mode: forwards;

                    @keyframes fivefont2 {
                        from {
                            opacity: 0;
                        }

                        to {
                            opacity: 1;
                        }
                    }
                }
            }

            .topmainbottom {
                width: 100%;
                height: 50%;
                background: url(./images/font1.png) center center no-repeat;
                background-size: cover;
                animation: fivefont1 1.5s 1.5s;
                opacity: 0;
                animation-fill-mode: forwards;
            }
        }
    }

    .fiveButtom {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: space-between;
        // background-color: antiquewhite;

        .fiveBleft {
            width: 50%;
            height: 100%;

            div {
                width: 100%;
                height: 100%;
                background: url(./images/buttom1.jpg) no-repeat;
                background-size: 103.5% auto;
                animation: fivebj2 1.5s;

                @keyframes fivebj2 {
                    from {
                        transform: translateX(-50px);
                    }

                    to {
                        transform: translateX(0);
                    }
                }
            }
        }

        .fiveBright {
            width: 50%;
            height: 100%;

            div {
                width: 100%;
                height: 100%;
                background: url(./images/buttom2.jpg) no-repeat;
                background-size: 100% auto;
                animation: fivebj3 1.5s;

                @keyframes fivebj3 {
                    from {
                        transform: translateX(50px);
                    }

                    to {
                        transform: translateX(0);
                    }
                }
            }
        }
    }
}